<template>
    <div class="info-right">
        <h3 class="title">服务详情</h3>
        <div class="error-info">
            <ul class="list">
                <li class="s2" style="margin-left: 12px;float: left;display: flex;width: 50%;">
                    <p style="width: 70px;">服务编码：</p><p :title="esbInboundMain.servcode+'@'+esbInboundMain.servversion" class="length240">{{esbInboundMain.servcode}}@{{esbInboundMain.servversion}}</p>
                </li>
                <li class="s2" style="margin-left: 12px;float: left;display: flex;">
                    <p style="width: 70px;">服务名称：</p><p :title="esbInboundMain.servname" class="length240">{{esbInboundMain.servname}}</p>
                </li>
                <div class="clearFix" style="margin-bottom: 15px;"></div>
                <li class="s2" style="margin-left: 12px;float: left;display: flex;width: 50%;">
                    <p style="width: 70px;">所属模块：</p><p class="length240">{{module}}</p>
                </li>
                <li class="s2" style="margin-left: 12px;float: left;display: flex;">
                    <p style="width: 70px;">依赖资源：</p><p class="length240">{{dependentResource}}</p>
                </li>
                <div class="clearFix" style="margin-bottom: 10px;"></div>
                <li class="s2 ">
                        <div class="error-s">
                        <div class="td">
                            <span class="name">告警信息</span>
                            <span class="grey-lights lights"></span>
                            <span class="time">{{warningSummary.sourcereqtime}}</span>
                        </div>
                        <div class="td2">
                            <div class="item">
                                <span class="s1">
                                    成功率:
                                    <span class>{{warningSummary.succ}}</span><span v-if="rules.hasOwnProperty('1')" class="red"> <{{rules['1']}}</span>
                                </span>
                                <span class="s2">
                                    同比:
                                    <span class>{{warningSummary.succYoy}}%</span><span v-if="rules.hasOwnProperty('9')" class="red"> {{rules['9']}}</span>
                                </span>
                                <span class="s2">
                                    环比:
                                    <span class>{{warningSummary.succMom}}%</span><span v-if="rules.hasOwnProperty('10')" class="red"> {{rules['10']}}</span>
                                </span>
                            </div>
                            <div class="item">
                                <span class="s1">
                                    平均响应时间:
                                    <span class>{{warningSummary.avgTime}}</span><span v-if="rules.hasOwnProperty('3')" class="red"> >{{rules['3']}}</span>
                                </span>
                                <span class="s2">
                                    同比:
                                    <span class>{{warningSummary.avgTimeYoy}}%</span><span v-if="rules.hasOwnProperty('11')" class="red"> >{{rules['11']}}</span>
                                </span>
                                <span class="s2">
                                    环比:
                                    <span class>{{warningSummary.avgTimeMom}}%</span><span v-if="rules.hasOwnProperty('12')" class="red"> >{{rules['12']}}</span>
                                </span>
                            </div>
                            <div class="item">
                                <span class="s1">
                                     调用次数:
                                    <span class>{{warningSummary.reqNum}}</span>
                                </span>
                                <span class="s2">
                                    同比:
                                    <span class>{{warningSummary.numYoy}}%</span><span v-if="rules.hasOwnProperty('7')" class="red"> >{{rules['8']}}</span>
                                </span>
                                <span class="s2">
                                    环比:
                                    <span class>{{warningSummary.numMom}}%</span><span v-if="rules.hasOwnProperty('7')" class="red"> >{{rules['8']}}</span>
                                </span>
                            </div>
                            <div class="item">
                                <span class="s1">
                                    注册推送告警:
                                    <span v-show="rules.hasOwnProperty('5') || rules.hasOwnProperty('6')" class="red">是</span>
                                    <span v-show="!rules.hasOwnProperty('5') && !rules.hasOwnProperty('6')">否</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <h3 class="title" style="margin-top: 10px;">服务控制</h3>
        <i class="el-icon-upload el-icon--right" @click="syncServ" title="服务重载"
           style="font-size:25px; color: #f07955; margin-left: 80px; margin-top:-18px; float:left; cursor:pointer;"></i>
        <div class="serves">
            <ul class="ips list" style="margin-top: 0px;">
                <li class="s1">
                    服务开关：
                    <el-switch v-model="isServe" @change="servSwitch" :disabled="isAdmin == 1 ? false : true"
                            active-color="#f58e7a" inactive-color="#c0b4b4"
                    ></el-switch>
                </li>
                <li class="s1" v-if="esbInboundMain.busitype == 5">
                    注册IP({{providerIps.length}})
                    <span v-if="handleType1 == true"
                            @click="handleType1 = false"
                            class="more" >
                        展开
                        <i class="top el-icon-caret-bottom"></i>
                    </span>
                    <span v-if="handleType1 == false"
                            @click="handleType1 = true"
                            class="less" >
                        收起
                        <i class="top2 el-icon-caret-top"></i>
                    </span>
                </li>
            </ul>
            <!-- 提供者IP -->
            <ul v-if="!handleType1" class="ip-list clearFix" >
                <li v-for="(item, index) in providerIps" :key="index">
                    {{item.ip}}:{{item.port}}
                    <span class="del" v-if="isAdmin == 1" @click="unregisterItem(item, index)"></span>
                </li>
            </ul>
            <ul class="ips list" v-if="esbConsumers.length == 0">
                <li class="s2">
                    <span class="td">暂无消费者</span>
                </li>
            </ul>
            <div style="margin-top: 10px;" ></div>
            <el-collapse v-model="activeName" accordion v-for="(item, index) in esbConsumers" :key="index"
                @change="activeChange">
                <el-collapse-item :title="item.systemName ? item.systemName : item.systemCode" :name="item.systemCode">
                    <ul class="ips list">
                        <li class="s2" v-if="item.systemName">
                            <span class="td">服务流控:</span>
                            <div v-if="isEdit" class="max-wrapper">
                                <span class="m1">最大并发{{esbInboundMain.busitype != 5 ? "/秒" : ""}}</span>
                                <input class="m2" v-model="maxclient" type="text"/>
                            </div>
                            <div v-if="isEdit" class="max-wrapper">
                                <span class="m1">最大流量{{esbInboundMain.busitype != 5 ? "/秒" : ""}}</span>
                                <input class="m2" v-model="maxclients" type="text"/>
                            </div>

                            <div v-if="!isEdit">
                                最大并发{{esbInboundMain.busitype != 5 ? "/60秒" : ""}}
                                <span class="max">{{esbInboundMain.busitype != 5 ? (item.maxclient/item.unit1)*60 : item.maxclient}}</span>
                            </div>
                            <div v-if="!isEdit">
                                最大流量{{esbInboundMain.busitype != 5 ? "/60秒" : ""}}
                                <span class="maxS">{{esbInboundMain.busitype != 5 ? (item.maxclients/item.unit2)*60 : item.maxclients}}</span>
                            </div>
                            <span v-if="!isEdit && isAdmin == 1" @click="handleEdit(index)" class="pen"></span>
                            <span v-if="isEdit" @click="handleSave(index)" class="save">保存</span>
                        </li>
                        <li>
                            消费IP({{consumerIpShow.length}})
                            <span v-if="handleType2[index] != true"
                                    @click="handleConsumerIp(index)"
                                    class="more" >
                                        展开
                                <i class="top el-icon-caret-bottom"></i>
                            </span>
                            <span v-if="handleType2[index] == true"
                                    @click="handleConsumerIp(index)"
                                    class="less" >
                                        收起
                                <i class="top2 el-icon-caret-top"></i>
                            </span>
                        </li>
                    </ul>
                    <!-- 消费者IP -->
                    <ul v-if="handleType2[index]" class="ip-list clearFix">
                        <li v-for="(ipItem, ipIndex) in consumerIpShow" :key="ipIndex">
                            {{ipItem.ip}}
                            <span class="refresh" v-if="isAdmin == 1 && esbInboundMain.busitype == 5" @click="refreshItem(ipItem)"></span>
                        </li>
                    </ul>
                </el-collapse-item>
            </el-collapse>
        </div>
        <h3 class="title error">
            报错轨迹(
            <span class="num">{{warningLogs.length}}</span> )
        </h3>
        <div class="error-info">
            <div class="error-s" v-for="(logItem, logIndex) in warningLogs" :key="logIndex">
                <div class="td">
                    <span class="name">报错通知</span>
                    <span class="grey-lights"></span>
                    <span class="time">{{logItem.createtime}}</span>
                </div>
                <div class="td2">
                    <div class="item">通知对象: {{logItem.linkman}}<el-divider direction="vertical"></el-divider> <span :title="logItem.msg" class="length240">通知内容: {{logItem.msg}}</span></div>
                </div>
            </div>
        </div>
        <v-service-radar :radarData="healthLevel" v-if="showRadar"></v-service-radar>

    </div>
</template>

<script>
import vServiceRadar from './ServiceRadar';
import { get, post } from '@/utils/request.js';

export default {
    name: "Service.vue",
    data() {
        return {
            activeName: '1',
            ipType: 0,
            isServe: false,
            isEdit: false,
            maxServeAmount: 1000, // 并发量
            maxFlow: 1000, // 流量
            esbInboundMain: {},
            esbConsumers: [],
            providerIps: [],
            consumerIps: {},
            consumerIpShow: [],
            handleType1: true,
            handleType2: [],
            warningLogs: [],
            warningSummary: {},
            rules: {},
            healthLevel: {},
            maxclient: 0,
            maxclients: 0,
            isAdmin: 1//localStorage.getItem("is_admin")
        }
    },
    props: ["esbServiceId", "showRadar", "module", "dependentResource"],
    components: {
        vServiceRadar
    },
    watch: {
        esbServiceId: {
            handler (newValue, oldValue) {
                if (newValue != 0 && newValue != undefined && newValue != oldValue) {
                    this.initData();
                    get('/esbview/esb-service-consumer/queryinfoByEsbid/' + newValue, '').then(res => {
                        this.$set(this, "esbInboundMain", res.esbInboundMain);
                        this.$set(this, "esbConsumers", res.esbSystemServicelists);
                        this.$set(this, "providerIps", res.proIps == null ? [] : res.proIps);
                        this.$set(this, "consumerIps", res.consumIps == null ? {} : res.consumIps);
                        if (this.esbInboundMain.status == '2') {
                            this.isServe = true;
                        }
                    });
                    get('/esbview/esb-warning-rule/track/' + this.esbServiceId + "?showRadar=" + this.showRadar, '').then(res => {
                        this.$set(this, "warningLogs", res.track.warningLogs == null ? [] : res.track.warningLogs);
                        this.warningSummary = res.track.logSummary[0];
                        if (this.warningSummary == undefined) {
                            this.warningSummary = {};
                        }
                        this.rules = res.track.rules;
                        if (this.rules == undefined) {
                            this.rules = {};
                        }
                        this.healthLevel = res.track.healthLevel;
                    });
                }
            },
            immediate: true
        }
    },
    methods: {
        initData() {
            // 初始化数据，清空
            this.handleType1 = true;
            this.handleType2 = [];
            this.consumerIpShow = [];
            this.esbInboundMain = {};
            this.esbConsumers = [];
            this.providerIps = [];
            this.consumerIps = {};
            this.warningLogs = [];
            this.warningSummary = {};
            this.rules = {};
            this.isServe = false;
            this.activeName = '';
        },
        handleConsumerIp(index) {
            this.$set(this.handleType2, index, !this.handleType2[index]);
            // this.handleType2[index] = !this.handleType2[index];
        },
        handleEdit(index) {
            let consumer = this.esbConsumers[index];
            if (this.esbInboundMain.busitype != '5') {
                this.maxclient = consumer.maxclient / consumer.unit1;
                this.maxclients = consumer.maxclients / consumer.unit2;
            } else {
                this.maxclient = consumer.maxclient;
                this.maxclients = consumer.maxclients
            }

            this.isEdit = true;
        },
        handleSave(index) {
            let that = this,
                consumer = that.esbConsumers[index],
                m1 = that.isNumber(this.maxclient),
                m2 = that.isNumber(this.maxclients);

            if (!m1 && !m2) {
                that.$message.error('最大并发/流量内容不允许都为空');
                return false;
            }
            if (m1) {
                consumer.maxclient = this.maxclient;
            }
            if (m2) {
                consumer.maxclients = this.maxclients;
            }

            post('/esbview/esb-system-service/update', JSON.stringify(consumer)).then(res => {
                this.$message({
                    type: 'success',
                    message: '保存成功!'
                });
                that.$set(that.esbConsumers[index], "maxclient", res.systemService.maxclient);
                that.$set(that.esbConsumers[index], "maxclients", res.systemService.maxclients);
            });

            that.isEdit = false;
        },
        unregisterItem(rpcServiceConfig, index) {
            // 取消注册
            this.$confirm('确定要取消注册吗？', '提示', {
                type: 'warning'
            }).then(() => {
                post('/esbview/rpc-service-config/unregister', JSON.stringify(rpcServiceConfig)).then(res => {
                    this.$message({
                        type: 'success',
                        message: '取消成功!'
                    });
                    this.providerIps.splice(index, 1);
                });
            }).catch(() => {});
        },
        refreshItem(rpcServiceConfig){
            // 重新推送
            this.$confirm('确定要重新推送吗？', '提示', {
                type: 'warning'
            }).then(() => {
                post('/esbview/rpc-service-config/notify', JSON.stringify(rpcServiceConfig)).then(res => {
                    this.$message({
                        type: 'success',
                        message: '推送成功!'
                    });
                });
            }).catch(() => {});
        },
        servSwitch() {
            let oldValue = !this.isServe;
            this.$confirm('此操作将改变服务状态, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.esbInboundMain.status = this.isServe ? '2' : '5';
                post('/esbview/esb-inbound-main/update', JSON.stringify(this.esbInboundMain)).then(res => {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                });
            }).catch(() => {
                this.isServe = oldValue;
            });
        },
        isNumber(value) {
            let patrn = /^(-)?\d+(\.\d+)?$/;
            if (patrn.exec(value) == null || value == '' || value == null) {
                return false;
            } else {
                return true;
            }
        },
        activeChange(activeNames) {
            if (activeNames == '') return;
            this.isEdit = false;
            if (this.consumerIps.hasOwnProperty(activeNames)) {
                this.consumerIpShow = this.consumerIps[activeNames];
            } else {
                this.consumerIpShow = [];
            }
            if (this.consumerIpShow == undefined) {
                this.consumerIpShow = [];
            }
        },
        syncServ() {
            this.$confirm('此操作将重载服务配置, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                get('/esbview/esb-inbound-main/reload/' + this.esbServiceId, "").then(res => {
                    this.$message({
                        type: res.code == '500' ? 'warning' : 'success',
                        message: res.msg,
                        duration: 5000
                    });
                });
            }).catch(() => {
                this.$message({
                    type: 'warning',
                    message: '出现异常，请查看日志',
                    duration: 5000
                });
            });
        }
    }
}
</script>

<style lang="scss" scoped>
$borderColor: #e4e7f0;
$actBorderColor: #ffc5b9;
$actColor: #f58e7a;
.info-right {
    flex: 1;
    margin: 15px 15px 10px 15px;
    border-left: 1px solid $borderColor;
    padding-left: 10px;

    .title {
        border: 0px solid #fff;
        border-left-color: #ff7462;
        border-left-width: 2px;
        border-left-style: solid;
        padding-left: 10px;
        border-radius: 0;
        font-size: 14px;
        height: 10px;
        line-height: 10px;
    }

    .error {
        margin-top: 15px;

        .num {
            color: #f58e7a;
        }
    }

    .serves {
        margin-top: 10px;
        border-top: 1px solid #e4e7ed;
        padding: 15px 25px 0;

        ul.list {
            display: flex;
            font-size: 14px;
            flex-wrap: wrap;

            li {
                position: relative;
                height: 20px;
                padding-left: 10px;

                &::before {
                    content: '';
                    background-color: #a9b1c8;
                    position: absolute;
                    left: 0;
                    top: 8px;
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                }
            }

            .s1 {
                width: 165px;
            }

            .s2 {
                flex: 1;
                display: flex;
                align-items: center;

                .td {
                    margin-right: 5px;
                }

                .max {
                    margin-top: 2px;
                    height: 12px;
                    line-height: 12px;
                    margin-left: 5px;
                    padding-left: 8px;
                    padding-right: 30px;
                    border-left: 1px solid #e5e5e5;
                }

                .maxS {
                    margin-top: 2px;
                    margin-left: 8px;
                    height: 12px;
                    line-height: 12px;
                    padding-left: 8px;
                    padding-right: 13px;
                    border-left: 1px solid #e5e5e5;
                }

                .max-wrapper {
                    width: 170px;
                    height: 20px;
                    line-height: 20px;
                    border: 1px solid #d4d4d4;
                    border-radius: 4px;
                    background-color: #f8f8f8;
                    /*display: flex;*/
                    align-items: center;
                    margin-right: 5px;

                    .m1 {
                        width: 85px;
                        padding: 0 5px;
                        height: 12px;
                        line-height: 12px;
                        // flex: 1;
                        border-right: 1px solid #e5e5e5;
                    }

                    .m2 {
                        // flex: 1;
                        width: 45px;
                        margin-left: 10px;
                    }
                }

                .pen {
                    width: 16px;
                    height: 16px;
                    background: url(../../../assets/img/pen.png) 50% no-repeat;
                    background-size: contain;
                    cursor: pointer;
                }

                .save {
                    display: inline-block;
                    background-color: #fff1ed;
                    color: #f07955;
                    font-size: 12px;
                    border-radius: 3px;
                    padding: 2px 5px;
                    cursor: pointer;
                }
            }


        }

        .ips {
            margin-top: 20px;

            .more {
                margin-left: 7px;
                display: inline-block;
                background-color: #edf3ff;
                color: #697cb1;
                font-size: 12px;
                padding-left: 7px;
                padding-right: 2px;
                border-radius: 8px;
                cursor: pointer;
            }

            .less {
                margin-left: 7px;
                display: inline-block;
                background-color: #fff1ed;
                color: #f07955;
                font-size: 12px;
                padding-left: 7px;
                padding-right: 2px;
                border-radius: 8px;
                cursor: pointer;
            }
        }

        .ip-list {
            margin-top: 10px;
            background-color: #fafafa;
            border-radius: 5px;
            border: 1px solid #eff2fa;
            padding-top: 15px;
            padding-left: 10px;

            li {
                width: 30%;
                float: left;
                font-size: 12px;
                height: 10px;
                line-height: 10px;
                display: flex;
                align-items: center;
                margin-bottom: 20px;

                .del {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    background: url(../../../assets/img/m-del.png) 50% no-repeat;
                    background-color: #f0f0f0;
                    background-size: 10px;
                    border-radius: 50%;
                    cursor: pointer;
                    margin-left: 20px;
                }

                .refresh {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    background: url(../../../assets/img/m-refresh.png) 50% no-repeat;
                    background-color: #f0f0f0;
                    background-size: 10px;
                    border-radius: 50%;
                    cursor: pointer;
                    margin-left: 20px;
                }
            }
        }
    }

    .error-info {
        border-top: 1px solid #e4e7ed;
        font-size: 14px;
        margin-top: 12px;
        padding-top: 12px;
        position: relative;
        overflow: hidden;

        &::after {
            display: block;
            content: '';
            height: 100%;
            width: 1px;
            background-color: #d3def5;
            position: absolute;
            top: 0;
            left: 91px;
            z-index: 1;
            margin-top: 70px;
        }

        .error-s {
            .td {
                display: flex;
                align-items: center;

                .name {
                    margin-left: 12px;
                }

                .grey-lights {
                    width: 10px;
                    height: 10px;
                    border: 2px solid #f1f1f1;
                    border-radius: 50%;
                    background-color: #99a3b4;
                    margin-left: 16px;
                    margin-right: 14px;
                    z-index: 2;
                }

                .lights {
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    background: url(../../../assets/img/lights.png) 50% no-repeat #f58e7a;
                    background-size: 10px;
                    margin: 0 10px;
                    border: 2px solid #ffefeb;
                    z-index: 2;
                }
            }

            .td2 {
                margin-left: 115px;

                .item {
                    display: flex;
                    color: #707070;
                    align-items: center;
                    margin-bottom: 10px;

                    .s1 {
                        padding-left: 15px;
                        color: #bbb9b9;
                        background: url(../../../assets/img/question.png) 0 50% no-repeat;
                        background-size: 14px;
                        margin-right: 5px;
                        width: 230px;

                        span {
                            color: #707070;
                        }
                        .red {
                            color: #ff0000;
                            padding-right: 5px;
                        }
                    }

                    .s2 {
                        margin-left: 28px;
                        color: #bbb9b9;
                        width: 120px;

                        span {
                            color: #707070;
                        }
                        .red {
                            color: #ff0000;
                            padding-right: 5px;
                        }

                    }

                    .red {
                        color: #ff0000;
                        padding-right: 5px;
                    }
                }
            }
        }

        .error-s.act {
            .name {
                color: #f58e7a;
            }
        }
    }
}
.length240 {
    width:240px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    /*兼容性*/
    -webkit-text-overflow:ellipsis;
}

</style>